<script setup lang="ts">
import {onMounted, reactive, toRefs} from "vue";
import {Message} from "@arco-design/web-vue";
import type {User} from '@/types/User';
import {userSelect} from "@/api/userApi";


const columns = reactive([
  {
    title: '用户名',
    dataIndex: 'username',
    align: 'center',
    ellipsis: true,
    tooltip: true,
  }, {
    title: '账户',
    align: 'center',
    ellipsis: true,
    tooltip: true,
    dataIndex: 'userAccount',
  }, {
    title: '头像',
    dataIndex: 'avatarUrl',
    slotName: 'avatarUrl',
    align: 'center',
  }, {
    title: '性别',
    dataIndex: 'gender',
    align: 'center',
    slotName: 'gender'
  }, {
    title: '电话',
    dataIndex: 'phone',
    align: 'center',
    ellipsis: true,
    tooltip: true,

  }, {
    title: '邮箱',
    dataIndex: 'email',
    align: 'center',
    ellipsis: true,
    tooltip: true,
  }, {
    title: '状态',
    dataIndex: 'userStatus',
    slotName: 'userStatus',
    align: 'center',
    width: 150,
  }, {
    title: '角色',
    align: 'center',
    dataIndex: 'userRole',
  }, {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    ellipsis: true,
    tooltip: true,
    slotName: 'createTime',
  }, {
    title: '修改时间',
    ellipsis: true,
    tooltip: true,
    align: 'center',
    dataIndex: 'updateTime',
  }, {
    title: '操作',
    align: 'center',
    slotName: 'optional',
    fixed: 'right',
    width: 120,
  }
]);

const state = reactive({
  userInfoList: [] as User[],
  userInfo: {} as User,
  isLoading: false,
  total: 0,
  pageSize: 10,
  currentPage: 1,
})

const {userInfoList, userInfo, isLoading} = {...toRefs(state)};

const form = reactive({
  username: '',
  userAccount: '',
  isRead: false,
})

const getUserInfoList = async (form?:any) => {
  try {
    isLoading.value = true;
    const res = await userSelect(form.username, form.userAccount);
    console.log(res.data)
    userInfoList.value = res.data.data;
  } catch (e) {
    console.log(e)
    Message.error('信息获取失败！')

  } finally {
    isLoading.value = false;

  }


}

onMounted(() => {
  getUserInfoList(form)
})

const handleSubmit = (data: any) => {
  console.log(data)
}

const handleReset = () => {
  form.username = ''
  form.userAccount = ''
  form.isRead = false
  getUserInfoList(form)
}
</script>

<template>
  <div class="user-manage">
    <div class="card-input" style="width: 100%;margin-bottom: 20px">
      <div>
        <a-card>
          <a-space style="display: flex; justify-content: space-between">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <a-space>
                <div style="margin-left: 40px"><strong>用户名： </strong>
                  <a-input value="large"  v-model="form.username" :style="{width:'320px'}" placeholder="请输入："
                           allow-clear/>
                </div>
                <div style="margin-left: 40px"><strong>用户账户：</strong>
                  <a-input value="large" v-model="form.userAccount" :style="{width:'320px'}" placeholder="请输入："
                           allow-clear/>
                </div>
              </a-space>
            </div>
            <div style="margin-right: 50px">
              <a-space>
                <a-button type="primary" @click="getUserInfoList(form)">
                  <template #icon>
                    <icon-search/>
                  </template>
                  查询
                </a-button>
                <a-button @click="handleReset()">
                  <template #icon>
                    <icon-sync/>
                  </template>

                  重置
                </a-button>
              </a-space>
            </div>
          </a-space>
        </a-card>
      </div>
    </div>
    <div class="card-list">
      <a-spin :loading="isLoading">
        <a-card>
          <a-table :columns="columns" :bordered="false" :loading="false" size="large" :data="userInfoList">

            <template #gender="{ record }">
              <a-tag size="small" v-if="record.gender === 1" color="green">男</a-tag>
              <a-tag size="small" v-else color="blue">女</a-tag>
            </template>

            <template #createTime="{ record }">
              <span>{{ record.createTime }}</span>
            </template>


            <template #userStatus="{ record }">
              <a-badge status="danger" text="封号"  v-if="record.isDelete === 1" />
              <a-badge status="success" text="正常" v-else />
            </template>

            <template #isDelete="{ record }">
              <a-badge status="danger" v-if="record.isDelete === 1" />
              <a-badge status="success"  v-else />
            </template>

            <template #avatarUrl="{ record }">
              <a-avatar>
                <img
                    v-if="record.avatarUrl"
                    alt="avatar"
                    :src="record.avatarUrl"
                />
                <a-avatar v-else :style="{ backgroundColor: '#c9cdd4' }">
                  <IconUser />
                </a-avatar>
              </a-avatar>
            </template>
          <template #optional="{ record }">
            <a-button type="primary">查看</a-button>
          </template>
          </a-table>
        </a-card>
      </a-spin>
    </div>
  </div>
</template>

<style scoped>

</style>
